<template>
	<view>
		<u-navbar title="创建方案" :back-icon-color="'#333333'" :title-color="'#333333'" title-size="32" :custom-back="back"
		 :title-bold="true" :border-bottom="false"></u-navbar>
		<view class="content">
			<u-toast ref="uToast" />

			<u-mask :show="toolTipShow" @click="closeToolTip">
				<view class="warp">
					<view class="flex_col" style="width: 454upx;">
						<view class="top_close">
							<image @click="closeToolTip" src="/static/img/close.png" mode="aspectFit" style="width: 44upx;height: 44upx;position: absolute;right: 0"></image>
						</view>
						<view class="toolTipPopue">
							<image src="/pagesB/static/img/wearPlan/firstTip_bg.png" mode="widthFix"></image>
							<view class="content">一套搭配方案至少包括上衣和裤子，但是增加鞋子帽子饰品等元素更能提升客户的满意度哟~</view>
						</view>
					</view>
				</view>
			</u-mask>
			<!-- 			<u-popup v-model="toolTipShow" mode="center" :closeable="false" width="454rpx" height="356rpx" border-radius="12" @close="closeToolTip" :custom-style="customStyle">
				<view style="height: 56upx;background: transparent;" @click="closeToolTip">
					<image src="/static/img/close.png" mode="aspectFit" style="width: 44upx;height: 44upx;position: absolute;right: 0"></image>
				</view>
				<view class="toolTipPopue">
					<image src="/pagesB/static/img/wearPlan/firstTip_bg.png" mode="widthFix"></image>
					<view class="content">一套搭配方案至少包括上衣和裤子，但是增加鞋子帽子饰品等元素更能提升客户的满意度哟~</view>
				</view>
			</u-popup> -->

			<u-modal v-model="deleteShow" @confirm="deleteImgConfirm" ref="uModal" title="提示" content="确定要删除该张图片吗"
			 :show-cancel-button="true"></u-modal>

			<u-modal v-model="deleteTagShow" @confirm="deleteTagConfirm" ref="uModal" title="提示" content="确定要删除该标签吗"
			 :show-cancel-button="true"></u-modal>

			<!-- 选择订单 -->
			<u-popup v-model="orderListShow" mode="bottom" :border-radius="36" :closeable="true">
				<view class="bottomSheet_content" style="max-height: 903rpx !important;">
					<view class="title">选择订单</view>
					<scroll-view scroll-y="true" v-if="orderList.length > 0">
						<view class="list-cell" v-for="(item, index) in orderList" :key="index" @click="selectOrder(index)">
							<view class="flex_col" style="align-items: flex-start;!important">
								<view class="flex_row">
									<image :src="item.user.headphoto" mode="aspectFit" style="margin-right: 10upx;width: 45upx;height: 45upx;border-radius: 50%;"></image>
									{{ item.user.nickname }}
								</view>
								<view style="color: #666666;font-size: 24upx;padding-top: 5upx;">订单号:{{ item.orderNo }}</view>
							</view>
							<image src="../../../static/img/select_on.png" style="width: 34upx;height: 34upx;" v-if="item.selected === true"></image>
							<image src="../../../static/img/select_off.png" style="width: 34upx;height: 34upx;" v-else></image>
						</view>
					</scroll-view>
					<view class="mocup_btn lgbtn" @tap="$u.throttle(confimSelectOrder, 500)">
						确定
					</view>
				</view>
			</u-popup>

			<!-- 顶部备注编辑框 -->
			<u-modal v-model="remarkVisible" title="设置方案标题" :show-cancel-button="true">
				<view class="slot-content">
					<u-input v-model="form.remark" type="text" placeholder="请输入标题" :border="true" maxlength="16" />
				</view>
			</u-modal>

			<u-popup mode="bottom" v-model="tagSheetVisible" :border-radius="36" :closeable="false">
				<view class="bottomSheet_content">
					<view class="bottomSheet_content_header">
						<view class="input-box">
							<input placeholder="添加标签" placeholder-style="color:#c0c0c0;" v-model="tagsValue" maxlength="12" />
						</view>
						<view class="close-btn">
							<view @tap="insertTagsList">确定</view>
						</view>
					</view>
					<scroll-view scroll-y="true" v-if="tagsData.length > 0">
						<view class="title">历史标签</view>
						<view class="sp">
							<view class="tag" v-for="(item,index) in tagsData" :key="index" @click="selectTag(index)">
								<view class="tag_content" hover-class="tag_hover">
									<image src="../../static/img/wearPlan/create_01.png"></image>
									<view>{{item.name}}</view>
								</view>
							</view>
						</view>
						<view style="margin-top: 20upx;display: flex;align-items: center;justify-content: center;">
							<u-icon name="trash" color="#666666" size="28" label="清空历史标签" @click="cleanTagsData"></u-icon>
						</view>
					</scroll-view>
				</view>
			</u-popup>

			<!-- <MdTooltip :gravity="toolForm.gravity" :tooltipShow="toolForm.tooltipShow" :content="toolForm.content" :eleId="toolForm.id"
			 @btnClick="sortTooltipClick"></MdTooltip> -->


			<view class="userInfo_float" hover-class="opacity7" v-if="userFlatButtonVisible" @click="goUserInfo">
				<image src="/pagesB/static/img/userInfo.png" mode="aspectFit" style="width: 45upx;height: 41upx;margin: 0 auto;"></image>
			</view>

			<view class="top_area">
				<scroll-view scroll-x="true" class="top_content">
					<block v-for="(item, index) in imgList" :key="index">
						<view class="img_box" v-bind:class="{ 'img_isSelect': selectImgIndex === index }" @tap="selectImg(index)"
						 @longtap="deleteImg(index)">
							<u-image width="80rpx" height="80rpx" :src="item.photo" mode="aspectFit">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
					</block>
					<view style="display: inline-block;" class="animated slower4 infinite" :class="{wobble: toolForm.index === 1 && toolForm.tooltipShow }">
						<zh-upFile id="createPlan_01" v-if="imgList.length < 9" :config='config' :type='1' width='80rpx' height='80rpx'
						 @upLoadFile='upImgcard' :background='certImgshow' :upFileType="2">
							<u-icon name="plus" size="30" :color="$u.color['lightColor']"></u-icon>
						</zh-upFile>
					</view>
				</scroll-view>
				<view class="complete_btn_white" hover-class="opacity7" @click="watchWearPlan()" v-if="form.schemeStatus === 1">
					预览
				</view>
				<view class="complete_btn" hover-class="opacity7" @click="saveWearPlan(0)" v-else>
					保存
				</view>
			</view>

			<view class="img_area">
				<view class="img_area_tip" hover-class="opacity7" @click="remarkVisible = true">
					<span style="max-width: 300upx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ form.remark === '' ? "标题": form.remark }}</span>
					<image src="../../static/img/wearPlan/edit.png" mode="" style="width: 30upx;height: 28upx;"></image>
				</view>

				<view class="img_area_showArea" style="position: relative;">
					<u-image width="750rpx" height="750rpx" style="position: absolute;" :src="imgList[selectImgIndex].photo" mode="aspectFit"
					 v-if="imgList.length > 0">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<image v-else style="position: absolute;width: 750upx;" src="../../static/img/default.png" mode="widthFix" />
					<movable-area class="drag_area">
						<!-- 可移动标签 -->
						<movable-view :x="item.x" :y="item.y" direction="all" @change="onChangeTag($event, index)" v-for="(item, index) in imgList[selectImgIndex].tags">
							<view style="display: flex;align-items: center;min-width: 300upx;" hover-class="opacity7" @longtap="deleteTag(index)">
								<view style="width: 10upx;height: 10upx;background: white;border-radius: 50%;margin-right: 12upx;"></view>
								<view class="move_tag">
									<image src="../../static/img/wearPlan/cart.png"></image>
									<view>{{ item.name }}</view>
								</view>
							</view>
						</movable-view>
					</movable-area>
				</view>
			</view>

			<view class="bottom_area">
				<view v-if="bottomIndex === 0" style="display: flex;padding-top: 56rpx;">
					<view class="click_area" hover-class="opacity7" @click="openAddTagModal">
						<image id="createPlan_02" src="../../static/img/wearPlan/create_01.png" mode="aspectFit"></image>
						<view>添加标签</view>
					</view>
					<view class="click_area" style="margin-left: 106upx;" hover-class="opacity7" @click="opeIntroduce">
						<image id="createPlan_03" src="../../static/img/wearPlan/create_02.png" mode="aspectFit"></image>
						<view>搭配简介</view>
					</view>
					<view class="send_btn" @click="sendPlan" v-if="imgList.length > 0 && form.schemeStatus !== 1">发送方案</view>
				</view>
				<uni-transition :mode-class="['slide-right']" :show="bottomIndex === 1">
					<view v-if="bottomIndex === 1" style="display: flex;flex-direction: row;justify-content: flex-end;">
						<view class="introduce_area">
							<view class="left">
								<image src="../../static/img/wearPlan/back.png" mode="" style="width: 19upx;height: 36upx;" @tap="completeIntroduce"></image>
							</view>
							<view class="middle">
								<view class="title">搭配简介</view>
								<view class="input_customStyle">
									<u-input v-model="introduceValue" type="textarea" :border="false" />
								</view>
							</view>
						</view>
						<view class="right">
							<view class="right_btn">
								<u-button size="mini" @click="completeIntroduce">确定</u-button>
							</view>
						</view>
					</view>
				</uni-transition>
			</view>

			<previewImage ref="previewImage" :opacity="0.8" :wearData="shareData" :imgs="imgs" :descs="descs"></previewImage>
		</view>
	</view>
</template>

<script>
	import uniTransition from '../../components/uni-transition/uni-transition.vue'
	import zhUpFile from '@/components/zh-upFile'
	// import MdTooltip from '@/components/MdTooltip/MdTooltip.vue'
	import {
		isBlank
	} from '@/utils/common.js'
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
	import { mixin } from "@/mixins/wearPlan.js"

	export default {
		components: {
			uniTransition,
			zhUpFile,
			// MdTooltip,
			previewImage
		},
		mixins:[mixin], //混入文件
		data() {
			return {
				config: {
					count: 9, // 上传图片张数
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				},
				certImgshow: '/static/img/img_pla.png',
				postData: {
					token: '',
					key: ''
				},
				selectImgIndex: 0, // 选中图片索引
				imgList: [],
				// 底部选项
				bottomIndex: 0,
				tagSheetVisible: false,
				tagsValue: '',
				tagsData: [],

				introduceValue: '', // 简介内容
				// 图片删除
				deleteShow: false,
				// 标签删除
				deleteTagShow: false,
				tagIndex: 0,
				// 备注
				remarkVisible: false,
				// 保存方案
				form: {
					content: [],
					remark: '',
					schemeStatus: null, // 保存方式 0:存草稿, 1:提交给下单人
				},
				// 搭配师待完成订单列表
				orderList: [],
				orderItem: {},
				orderListShow: false,
				// ToolTip
				// toolForm: {
				// 	tooltipShow: true,
				// 	content: '点击上传图片(建议在淘宝保存带有二维码的的图片)',
				// 	id: "createPlan_01",
				// 	gravity: "bottom",
				// 	index: 1
				// },
				toolTipShow: false,
				// 用户资料入口flatButton
				userFlatButtonVisible: false,
			}
		},
		onLoad(options) {
			// 修改方案时
			if (options.id) {
				this.form.id = options.id
				this.findSchemeById()
			}
			// 绑定订单时
			if (options.orderId && options.buyerUserId) {
				this.form.orderId = options.orderId
				this.form.buyerUserId = options.buyerUserId
				this.findSchemeByOrderId()
				this.userFlatButtonVisible = true // 搭配师信息浮窗
			}

			// 获取缓存的标签
			if (!isBlank(uni.getStorageSync('wearPlan_tags'))) {
				this.tagsData = uni.getStorageSync('wearPlan_tags')
			}

			// ToolTip
			if (isBlank(uni.getStorageSync('hasInfirst_CreatePlan'))) {
				this.toolTipShow = true
				// this.toolForm.tooltipShow = false
			}

		},
		onHide() {
			// 点击图片上传时回调
			// if (isBlank(uni.getStorageSync('hasInfirst_CreatePlan'))) {
			// 	if (this.toolForm.index === 1) {
			// 		this.toolForm = {
			// 			tooltipShow: true,
			// 			content: '点击添加标签',
			// 			id: "createPlan_02",
			// 			gravity: "top_01",
			// 			index: 2
			// 		}
			// 	}
			// }
		},
		methods: {
			// 自定义返回
			back() {
				var _this = this

				if (_this.imgList.length > 0 && _this.form.schemeStatus !== 1) {
					uni.showModal({
						title: '提示',
						content: '您的搭配方案未保存草稿，是否保存当前方案并退出',
						confirmText: "保存",
						success: function(res) {
							if (res.confirm) {
								_this.saveWearPlan(0, "nowatch")
							} else {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					});
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			// 关闭toolTip
			closeToolTip() {
				this.toolTipShow = false
				uni.setStorageSync('hasInfirst_CreatePlan', true)
			},
			// 通过方案ID查询方案明细
			findSchemeById() {
				var data = {
					id: this.form.id
				}

				this.$u.api.findSchemeById(data).then(res => {
					if (res.code === 200) {
						// 处理imglist
						this.form.orderId = res.data.orderId
						this.form.buyerUserId = res.data.buyerUserId
						this.form.remark = res.data.remark
						this.form.schemeStatus = res.data.schemeStatus

						let content = JSON.parse(res.data.content)
						let list = []
						for (let i in content) {
							content[i][0].photo = "https://posting.imguangguang.com/" + content[i][0].photo
							list.push(content[i][0])
						}
						this.imgList = list

						// 第一张图片有简介时 直接显示
						if (!isBlank(content[0][0].introduce)) {
							this.bottomIndex = 1
							this.introduceValue = content[0][0].introduce
						}

						// 显示悬浮窗
						if (!isBlank(res.data.buyerUserId)) {
							this.userFlatButtonVisible = true
						}
					} else {
						// 未制作 草稿
						this.form.schemeStatus = 0
					}
				})

			},
			// 通过订单ID查询方案明细
			findSchemeByOrderId() {
				var data = {
					orderId: this.form.orderId
				}

				this.$u.api.findSchemeByOrderId(data).then(res => {
					if (res.code === 200) {
						// 处理imglist
						this.form.id = res.data.id
						this.form.remark = res.data.remark
						this.form.schemeStatus = res.data.schemeStatus

						let content = JSON.parse(res.data.content)
						let list = []
						for (let i in content) {
							content[i][0].photo = "https://posting.imguangguang.com/" + content[i][0].photo
							list.push(content[i][0])
						}
						this.imgList = list

						// // 显示悬浮窗
						if (!isBlank(res.data.buyerUserId)) {
							this.userFlatButtonVisible = true
						}
					} else {
						// 未制作 草稿
						this.form.schemeStatus = 0
					}
				})
			},
			// 打开添加标签Modal
			openAddTagModal() {
				if (this.imgList.length === 0) {
					uni.showToast({
						title: "请先上传至少一张图片",
						icon: 'none'
					})
					return false
				}

				this.tagSheetVisible = true;
				this.tagsValue = ''
			},
			// 添加标签
			insertTagsList() {
				if (isBlank(this.tagsValue)) {
					uni.showToast({
						title: "请先输入内容",
						icon: 'none'
					})
					return false
				}
				let list = []
				let arr = {
					name: this.tagsValue
				}
				list.push(arr)

				this.tagsData = this.tagsData.concat(list)
				this.tagsData = this.unique(this.tagsData)
				uni.setStorageSync('wearPlan_tags', this.tagsData)
				this.tagsValue = ''

				this.selectTag(this.tagsData.indexOf(arr))
			},
			// 选择标签
			selectTag(index) {
				if (this.imgList[this.selectImgIndex].tags.length >= 3) {
					uni.showToast({
						title: "该图片最多使用3个标签",
						icon: "none"
					})
					return false
				}

				let tag = this.tagsData[index]
				let arr = {
					x: 30,
					y: this.imgList[this.selectImgIndex].tags.length * 30,
					name: this.tagsData[index].name,
					url: '', // 暂时废弃
				}
				this.imgList[this.selectImgIndex].tags.push(arr)
				this.tagSheetVisible = false
			},
			// 数组去重
			unique(array) {
				var lsArr = [];
				for (var i = 0; i < array.length; i++) {
					if (!lsArr.includes(array[i])) {
						lsArr.push(array[i]);
					}
				}
				return lsArr;
			},
			// 清除历史标签
			cleanTagsData() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定要清除所有历史标签吗',
					success: function(res) {
						if (res.confirm) {
							that.tagsData = []
							uni.setStorageSync('wearPlan_tags', that.tagsData)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			// 上传图片
			upImgcard(res) {
				var _this = this

				// if (isBlank(uni.getStorageSync('hasInfirst_CreatePlan'))) {
				// 	if (_this.toolForm.index === 1) {
				// 		_this.toolForm = {
				// 			tooltipShow: true,
				// 			content: '点击添加标签',
				// 			id: "createPlan_02",
				// 			gravity: "top_01",
				// 			index: 2
				// 		}
				// 	}
				// }

				uni.showLoading({
					title: '上传中...'
				});

				let tempFilePaths = res.tempFilePaths

				// 获取token 
				_this.$u.api.getPostingQiniuToken().then(res => {
					if (res.code === 200) {
						_this.postData.token = JSON.parse(res.data).qiniuToken
						// 开始上传
						for (var i = 0; i < tempFilePaths.length; i++) {
							_this.postData.key = _this.$u.guid() // 随机key	

							uni.uploadFile({
								url: 'https://upload-Z2.qiniup.com', //华南地区用这个
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'key': _this.postData.key,
									'token': _this.postData.token
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes)
									let img = "https://posting.imguangguang.com/" + JSON.parse(uploadFileRes.data).key
									let arr = {
										photo: img,
										introduce: '',
										name: '',
										isLike: null,
										tags: []
									}

									if (_this.imgList.length >= 9) {
										uni.showToast({
											title: "最多上传9张图片",
											icon: "none"
										})
										uni.hideLoading()
										return false
									}

									_this.imgList.push(arr)

									_this.selectImg(_this.imgList.length - 1)

									// 重置bottom
									_this.bottomIndex = 0
									_this.introduceValue = ''
								},
								fail: (error) => {
									if (error && error.response) {
										uni.showToast({
											title: error.response,
											icon: 'none'
										})
									}
								},
								complete: () => {
									setTimeout(function() {
										uni.hideLoading();
									}, 250);
								},
							});
						}
					}
				})
			},
			// 选择图片
			selectImg(index) {
				this.selectImgIndex = index

				// 图片有简介时 直接显示
				if (!isBlank(this.imgList[this.selectImgIndex].introduce)) {
					this.bottomIndex = 1
					this.introduceValue = this.imgList[this.selectImgIndex].introduce
				} else {
					// 重置bottom
					this.bottomIndex = 0
					this.introduceValue = ''
				}
			},
			// 图片拖拽
			onChangeTag(e, index) {
				// 保存位置
				this.imgList[this.selectImgIndex].tags[index].x = e.detail.x
				this.imgList[this.selectImgIndex].tags[index].y = e.detail.y
			},
			// 打开搭配简介 
			opeIntroduce() {
				if (this.imgList.length === 0) {
					uni.showToast({
						title: "请先上传至少一张图片",
						icon: 'none'
					})
					return false
				}

				this.bottomIndex = 1
				this.introduceValue = this.imgList[this.selectImgIndex].introduce
			},

			// 完成简介
			completeIntroduce() {
				this.imgList[this.selectImgIndex].introduce = this.introduceValue
				this.bottomIndex = 0
				this.introduceValue = ''
			},
			// 长按删除图片
			deleteImg(index) {
				this.deleteShow = true
			},
			deleteImgConfirm() {
				this.imgList.splice(this.selectImgIndex, 1)
				// 重置bottom
				this.bottomIndex = 0
				this.introduceValue = ''
				// 重置选中index
				this.selectImgIndex = 0
			},
			// 长按删除标签
			deleteTag(index) {
				this.tagIndex = index
				this.deleteTagShow = true
			},
			deleteTagConfirm() {
				this.imgList[this.selectImgIndex].tags.splice(this.tagIndex, 1)
			},
			// 完成保存方案
			saveWearPlan(schemeStatus, nowatch) {
				var _this = this

				if (_this.imgList.length <= 2 && schemeStatus === 1) {
					uni.showToast({
						title: "请先至少上传三张图片方案",
						icon: "none"
					})
					return false
				}

				if (isBlank(_this.form.remark)) {
					uni.showToast({
						title: "请填写方案备注",
						icon: "none"
					})
					_this.remarkVisible = true
					return false
				}

				// 处理数据
				let content = []
				let imgList = JSON.parse(JSON.stringify(_this.imgList))
				for (let i in imgList) {
					imgList[i].photo = imgList[i].photo.replace("https://posting.imguangguang.com/", '') // 图片处理
					content.push([imgList[i]])
				}

				var data = {
					schemeStatus: 0, // 0:存草稿, 1:提交给下单人(会自动通过聊天窗口发送)
					content: JSON.stringify(content),
					remark: _this.form.remark
				}

				// 发送方案
				if (schemeStatus === 1) {
					data.schemeStatus = 1
				}

				if (_this.form.id) {
					data.id = _this.form.id
				}
				if (_this.form.orderId) {
					data.orderId = _this.form.orderId
				}
				if (_this.form.buyerUserId) {
					data.buyerUserId = _this.form.buyerUserId
				}


				_this.$u.api.saveScheme(data).then(res => {
					if (res.code === 200) {
						_this.$refs.uToast.show({
							title: schemeStatus === 0 ? '保存方案成功' : '发送方案成功',
							type: 'success',
							duration: 1200,
							callback: function() {
								// 保存退出不预览
								if (nowatch) {
									let pages = getCurrentPages(); // 当前页面
									let beforePage = pages[pages.length - 2]; // 前一个页面
									uni.navigateBack({
										delta: 1,
										success: function() {
											if (beforePage.route === 'pagesB/pages/wearPlan/stylist_planList') {
												// 返回我的穿搭方案列表时才刷新 其他入口不刷新
												beforePage.onLoad(); // 执行前一个页面的onLoad方法
											}
										}
									})
									return
								}

								if (schemeStatus === 1) {
									_this.form.schemeStatus = 1
								}

								uni.showModal({
									title: '预览',
									content: '要查看预览效果图吗？',
									success: function(res) {
										if (res.confirm) {
											// 已完成预览
											_this.imgs = []
											_this.descs = []
											
											let newContent = JSON.parse(JSON.stringify(content))
											for(let i in newContent) {
												newContent[i][0].photo = "https://posting.imguangguang.com/" + newContent[i][0].photo
											}
											
											var shareData = {
												content: newContent,
												id: _this.form.id
											}
											_this.shareData = shareData
											
											for (let i in content) {
												_this.imgs.push("https://posting.imguangguang.com/" + content[i][0].photo)
												_this.descs.push(content[i][0].introduce)
											}

											_this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
										} else {
											let pages = getCurrentPages(); // 当前页面
											let beforePage = pages[pages.length - 2]; // 前一个页面
											uni.navigateBack({
												delta: 1,
												success: function() {
													if (beforePage.route === 'pagesB/pages/wearPlan/stylist_planList') {
														// 返回我的穿搭方案列表时才刷新 其他入口不刷新
														beforePage.onLoad(); // 执行前一个页面的onLoad方法
													}
												}
											})
										}
									}
								});

							}
						})
					}
				})
			},
			// 预览方案
			watchWearPlan() {
				// 处理数据
				let content = []
				let imgList = JSON.parse(JSON.stringify(this.imgList))
				for (let i in imgList) {
					imgList[i].photo = imgList[i].photo.replace("https://posting.imguangguang.com/", '') // 图片处理
					content.push([imgList[i]])
				}

				this.imgs = []
				this.descs = []
				var shareData = {
					content: content,
					id: this.form.id
				}

				this.shareData = shareData
				for (let i in content) {
					this.imgs.push("https://posting.imguangguang.com/" + content[i][0].photo)
					this.descs.push(content[i][0].introduce)
				}

				this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
			},
			// 发送方案
			sendPlan() {
				var that = this
				// 订单页过来直接保存发送
				if (!isBlank(that.form.orderId)) {
					uni.showModal({
						title: '提示',
						content: '是否确定完成方案提交直接发送给用户？',
						success: function(res) {
							if (res.confirm) {
								that.saveWearPlan(1)
							}
						}
					});
				} else {
					// 未绑定订单时 查询搭配师待完成的穿搭方案订单
					var data = {
						pageNum: 1,
						pageSize: 10,
						type: 1 // 1:待完成且没有绑定方案的订单
					}
					that.$u.api.findNoFinishSchemes(data).then(res => {
						if (res.code === 200) {
							that.orderList = res.data.records

							for (let i in that.orderList) {
								that.orderList[i].selected = false
							}

							if (that.orderList.length === 0) {
								uni.showToast({
									title: "暂无订单",
									icon: "none"
								})
							} else {
								// 打开可选订单列表
								that.orderItem = {}
								that.orderListShow = true
							}
						}
					})
				}
			},
			// 选择订单
			selectOrder(index) {
				this.$nextTick(function() {
					for (let i = 0; i < this.orderList.length; i++) {
						if (index === i) {
							this.orderList[i].selected = true
							this.orderItem = this.orderList[i] // 选中的订单数据
						} else {
							this.orderList[i].selected = false
						}
					}
				})
			},
			// 确认绑定订单
			confimSelectOrder() {
				this.form.orderId = this.orderItem.id
				this.form.buyerUserId = this.orderItem.placeAnOrderUserId
				this.saveWearPlan(1)
			},
			// ToolTip引导
			// sortTooltipClick() {
			// 	if (this.toolForm.index === 1) {
			// 		this.toolForm = {
			// 			tooltipShow: true,
			// 			content: '点击添加标签',
			// 			id: "createPlan_02",
			// 			gravity: "top_01",
			// 			index: 2
			// 		}
			// 		return
			// 	}
			// 	if (this.toolForm.index === 2) {
			// 		this.toolForm = {
			// 			tooltipShow: true,
			// 			content: '点击添加简介',
			// 			id: "createPlan_03",
			// 			gravity: "top_02",
			// 			index: 3
			// 		}
			// 		return
			// 	}
			// 	if (this.toolForm.index === 3) {
			// 		this.toolForm = {
			// 			tooltipShow: false,
			// 		}
			// 		uni.setStorageSync('hasInfirst_CreatePlan', true)
			// 		return
			// 	}
			// },
			// 跳转用户资料
			goUserInfo() {
				uni.navigateTo({
					url: "/pagesB/pages/my/userInfo?userId=" + this.form.buyerUserId
				})
			},
		}
	}
</script>

<style lang="scss">
	.slot-btn {
		width: 80upx;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.img_isSelect {
		border: 2px solid #B1BEFD;
	}

	.img_box {
		display: inline-block;
		margin-right: 24upx;
	}

	.content {
		background-color: #F7F8FA;
		position: relative;

		.userInfo_float {
			position: absolute;
			right: 0;
			top: 163upx;
			width: 78upx;
			height: 78upx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			background: rgba(17, 17, 17, 0.39);
			z-index: 2000;
		}

		.top_area {
			background-color: white;
			width: 100%;
			height: 104upx;
			padding: 0 22upx 0 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.top_content {
				display: flex;
				align-items: center;
				white-space: nowrap; // 滚动必须加的属性
				width: 590upx;
				height: 100%;
			}

			.complete_btn {
				width: 96upx;
				height: 56upx;
				border-radius: 4upx;
				background: #B1BEFD;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 56upx;
				text-align: center;
			}

			.complete_btn_white {
				width: 96upx;
				height: 56upx;
				border-radius: 4upx;
				background: white;
				border: 1px solid #979797;
				font-weight: bold;
				color: #979797;
				line-height: 56upx;
				text-align: center;
			}
		}


		// 图片区域
		.img_area {
			background-color: white;

			&_tip {
				width: 100%;
				height: 60upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				color: #333333;

				image {
					margin-left: 12upx;
				}
			}

			&.img_area_showArea {
				width: 750upx;
				height: auto;
			}

			// 拖动标签
			.move_tag {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: row;
				font-size: 28upx;
				padding: 6upx 12upx;
				border-radius: 5upx;
				background: rgba(17, 17, 17, 0.39);
				color: white;

				image {
					width: 38upx;
					height: 31upx;
					margin-right: 16upx;
				}
			}
		}


		// 底部区域
		.bottom_area {
			position: fixed;
			bottom: 0;
			background: #FFFFFF;
			width: 100%;
			height: 300upx;
			display: flex;
			color: #333333;
			font-size: 28upx;
			justify-content: center;
			padding-top: 18upx;

			.send_btn {
				position: absolute;
				bottom: 36upx;
				right: 30upx;
				width: 162upx;
				height: 64upx;
				background: #1C1723 !important;
				line-height: 64rpx;
				border-radius: 4rpx;
				color: white;
				font-size: 28upx;
				font-weight: bold;
				text-align: center;
			}

			.click_area {
				display: flex;
				align-items: center;
				flex-direction: column;

				image {
					width: 52upx;
					height: 52upx;
					margin-bottom: 8upx;
				}
			}

			.introduce_area {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.middle {
					margin: 18upx;
					width: 550upx;

					.title {
						font-size: 28upx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 8upx;
					}

					.input_customStyle {
						width: 551upx;
						height: 166upx;
						background-color: #F4F4F4;
						border-radius: 16upx;
						padding: 0upx 8upx;
						font-size: 22upx;
					}
				}
			}

			.right {
				display: flex;
				align-items: flex-end;
				margin-bottom: 18upx;
			}
		}
	}

	// 弹窗样式
	.bottomSheet_content {
		min-height: 903upx;
		padding: 24upx 30upx;

		&_header {
			display: flex;
			align-items: center;
			margin-bottom: 36upx;

			.input-box {
				width: 602upx;
				height: 62upx;
				background-color: #f4f4f4;
				border-radius: 34upx;
				position: relative;
				display: flex;
				align-items: center;
				margin-right: 24upx;

				.icon {
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					right: 0;
					width: 60upx;
					height: 60upx;
					font-size: 34upx;
					color: #c0c0c0;
				}

				input {
					padding-left: 28upx;
					height: 28upx;
					font-size: 28upx;
				}
			}

			.close-btn {
				font-size: 32upx;
				color: #666666;
			}
		}

		.scrollView {
			color: #333333;

			.title {
				font-size: 28upx;
				margin: 36upx 0 12upx 0;
			}
		}

		.sp {
			margin-top: 8upx;

			.tag {
				display: inline-block;

				.tag_content {
					display: flex;
					align-items: center;
					font-size: 26upx;
					padding: 6upx 12upx;
					border-radius: 8upx;
					margin: 0 32upx 20upx 0;
					background-color: #F4F4F4;

					image {
						width: 28upx;
						height: 28upx;
						margin-right: 16upx;
					}
				}
			}

			.tag_hover {
				color: #2b85e4 !important;
				background-color: #ecf5ff !important;
			}
		}

		.title {
			font-size: 36upx;
			font-weight: bold;
			color: #333333;
			margin-top: 13upx;
			text-align: center;
		}

		.list-cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			width: 100%;
			padding: 30upx 0;
			overflow: hidden;
			color: #666666;
			font-size: 28upx;
		}

		.lgbtn {
			margin-top: 30upx;
			width: 368upx;
			height: 90upx;
		}
	}

	// 备注彈窗样式
	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding: 20rpx 30rpx;
	}

	// 图片拖动区域
	.drag_area {
		width: 750upx;
		height: 750upx;
		overflow: hidden;
	}

	// toolTip 弹窗
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		.top_close {
			height: 56upx;
			background: transparent;
			width: 100%;
			position: relative;
		}
		.toolTipPopue {
			position: relative;
			border-radius: 12upx;
			width: 454upx;
			height: 300upx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 70px 41upx;
		
			image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 12upx;
			}
		
			.content {
				font-size: 28upx;
				font-weight: bold;
				color: #FFFFFF;
				background: transparent;
			}
		}
	}


</style>
